<style>
.toolsbar {
	height: auto;
	align-items: center;
	/*border-bottom: #D2D7DC thin solid;*/	
	background-color: #F5F5F5;
}
.toolsbar-title {
	height: 40px;
		font-size: 12px;
	
}
.toolsbar-title-img {
	width: 20px;
	height: 20px;
	margin: 5px;
}
.toolsbar-content{
	height: 40px;
	border-bottom-color: #404040;
}



.toolsbar-addressbar{
	height: 25px;
	margin: 0 5px;
	background-color: white;
	justify-content: flex-start;
	/*box-shadow: 0 0 2px 1px rgba(0,0,0,0.2) inset;*/
	border: #D0CDC4 thin solid;
	padding: 0 5px; 
	border-radius: 3px;
}
.toolsbar-path-holder{		
	padding: 0;
	width: auto;		
}
.toolsbar-path{
	border: none;
	width: auto;
	height: auto;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	background: white;
}
.toolsbar-path:hover{
	background: #E0E0DC;
}
.toolsbar-btn{
	min-width: 20px;
	min-height: 20px;
	max-width: 20px;
	max-height: 20px;
	margin: 0 5px;
}
.toolsbar-btn:hover{
	background-color: #E0E0DC;
}
.toolsbar-sp{
	border: none;
	width: auto;
	margin: 0;
	padding: 0;
	background: white;
}
.toolsbar-input{
	width: 100%;
	border: none;	
	outline: none;
}
.toolsbar-search{
	width: 320px;
	height: 25px;
	margin: 0 5px 0 0;
	background-color: white;
	justify-content: flex-start;	
	border: #D0CDC4 thin solid;
	padding: 0 5px; 
	border-radius: 3px;
	
}
.toolsbar-search-input{
	width: 100%;
	border: none;
	outline: none;
}
</style>
<template>
	<div class="toolsbar col">
		<div class="toolsbar-title row">
			<img class="toolsbar-title-img" draggable="false" src="favicon.ico" />
			<h3>{{w.config.title}}@<span style="font-size: smaller;">{{w.serverInfo.httpRoot}}</span></h3>
		</div>		
		<div class="toolsbar-content row">
			<img class="toolsbar-btn" src="resource/images/star.png" draggable="false" 
				@click.self.stop="w.fav.add()"/>
			<img class="toolsbar-btn" src="resource/images/home.png" draggable="false" 
				@click.self.stop="w.files.load(w.serverInfo.docRoot)"/>
			<img class="toolsbar-btn" src="resource/images/up.png" draggable="false" 
				@click.self.stop="w.files.up()"/>
			
			<div class="toolsbar-addressbar t" 
				@click="onShowInput" >
				<div class="toolsbar-path-holder" v-if='!input' v-for="(item,key) in w.files.paths">
					<button class="toolsbar-path" 
						@click.stop="onPathClicked(item)"
						>{{item}}</button>
					<button class="toolsbar-sp" v-if = "key != w.files.paths.length-1">/</button>
				</div>			
				<input id = 'toolsbar-input' v-show = 'input' v-model="w.files.path" class="toolsbar-input" spellcheck="false" 					 
					@blur="onInputLostFocus" 
					@keypress.enter="onInputKeyPress" 
					/>
			</div>		
			<div class="toolsbar-search">
				<input type="text" spellcheck="false" class="toolsbar-search-input mla" v-model="w.files.filter"></input>
				<img style="width: 12px; height: 12px;" @click="w.files.filter = ''" v-if="w.files.filter.length > 0" src="resource/images/clear.png" />
			</div>
		</div>
	</div>
</template>

<script>
	{
		name: 'toolsbar',
		data: function() {return {
			w:wnds,
			input:false,
			searchinput:''
		}},		
		methods: {
			onShowInput:function(){
				this.input = true
				Vue.nextTick(function(){
					document.getElementById('toolsbar-input').focus()	
				})
			},
			onInputLostFocus:function(){				
				this.input  = false
				this.w.files.reload()
			},
			onInputKeyPress:function(){
				this.input  = false
				this.w.files.reload()
			},
			onPathClicked:function(e){				
				this.w.files.backto(e)				
			}
		},
		created: function() {
			
		}
	}
</script>

